<script lang="ts" setup>
import { Search, Refresh } from '@element-plus/icons-vue'
import { HttpStatusCode } from 'axios'
import { ElMessage } from 'element-plus'
import { getHouseResPage } from '../../api/houseRes'
import DataTable from './components/DataTable/index.vue'
import PreviewBox from './components/PreviewBox/index.vue'


let houseResList = ref<ListHouseRes[]>([])
let search_key = ref('')
const pagination = reactive<Page>({})
let loading = ref(false)
let previewList = ref<ListHouseMedia[]>([])
let showPreview = ref<boolean>(false)

const getData = async (page: number, search_key: string) => {
  loading.value = true
  const res = await getHouseResPage(page, search_key)
  if(res.statusCode === HttpStatusCode.Ok) {
    houseResList.value = res.data.data as ListHouseRes[]
    pagination.current = page
    pagination.total = res.data.total
    pagination.pageSize = res.data.pageRow
    loading.value = false
  } else {
    ElMessage({
      message: '获取失败，请重试',
      type: 'error',
    })
  }
}

const searchFun = () => {
  getData(1, search_key.value)
}

const resetFun = () => {
  search_key.value = ''
  getData(1, search_key.value)
}

const handleChange = (val: number) => {
  getData(val, search_key.value);
}

const changePreview = (mediaList: ListHouseMedia[]) => {
  console.log(mediaList)
  previewList.value = mediaList
  showPreview.value = !showPreview.value
}

const handleShowPreview = () => {
  showPreview.value = !showPreview.value
}

onMounted(() => {
  getData(1, search_key.value)
})
</script>

<template>
  <div class="header">
    <div class="btn_group">

    </div>
    <div class="search_group">
      <el-input placeholder="输入名称" v-model="search_key" />
      <el-button class="search_btn" type="primary" :icon="Search" color="#232442" @click="searchFun"></el-button>
      <el-button class="search_btn" type="primary" :icon="Refresh" color="#232442" @click="resetFun"></el-button>
    </div>
  </div>
  <div class="bodyer">
    <DataTable :data-list="houseResList" :loading="loading" @increase="getData" @preview="changePreview" />
    <el-pagination class="page" background layout="prev, pager, next" :total="pagination.total"
                   :current-page="pagination.current"
                   @current-change="handleChange" />
  </div>
  <el-dialog
      v-model="showPreview"
      title="房源预览"
      width="50%"
      :before-close="handleShowPreview"
  >
    <PreviewBox :preview-list="previewList" />
  </el-dialog>
</template>

<style lang="less" scoped>
@import '../../styles/baseAdmin.less';
</style>
